<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .searchForm {
        display: flex;
        align-items: center;
    }

    .searchForm .layui-tab-title li {
        min-width: 30px;
        padding: 0 8px;
    }

    .searchForm .layui-tab-brief>.layui-tab-title .layui-this:after {
        display: none;
    }

    .searchForm .layui-tab-title {
        border: none;
    }

    .searchForm>div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
</style>

<body style="overflow-x: scroll;">
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">账号管理</a>
            <a><cite>全站充值报表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-tab" lay-filter="tableType" style="margin-top:0px;margin-bottom:20px">
            <ul class="layui-tab-title">
                <li class="layui-this">充值渠道日报表</li>
                <li>充值渠道月报表</li>
                <li>产品来源日报表</li>
                <li>产品来源月报表</li>
            </ul>
        </div>

        <div class="layui-row">
            <form class="layui-form searchForm">
                <div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">日期：</label>
                        <div class="layui-inline" id="time" style="display: flex;align-items: center;">
                            <div class="layui-input-inline" style="margin-right:10px">
                                <input type="text" class="layui-input" name="start_date" id="start_time" autocomplete="off" placeholder="开始时间">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="end_date" id="end_time" autocomplete="off" placeholder="结束日期">
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab layui-tab-brief layui-inline-block" lay-filter="dateType">
                        <ul class="layui-tab-title">
                            <li data-time="date:1">昨天</li>
                            <li data-time="date:0">今天</li>
                            <li data-time="date:7">近7天</li>
                            <li data-time="date:30">近30天</li>
                        </ul>
                    </div>
                </div>
                <div style="display: none;">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">月份：</label>
                        <div class="layui-inline" id="month_time" style="display: flex;align-items: center;">
                            <div class="layui-input-inline" style="margin-right:10px">
                                <input type="text" class="layui-input" name="start_month" id="start_month"
                                    autocomplete="off" placeholder="开始月份">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="end_month" id="end_month"
                                    autocomplete="off" placeholder="结束月份">
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab layui-tab-brief" lay-filter="dateType">
                        <ul class="layui-tab-title">
                            <li data-time="month:1">上个月</li>
                            <li data-time="month:3">最近三个月</li>
                        </ul>
                    </div>
                </div>

                <button class="layui-btn" style="margin-left: 10px;" lay-submit
                    lay-filter="searchFinanceList">搜索</button>
                <button type="reset" id="resetFinanceList" class="layui-btn layui-btn-primary">重置</button>
            </form>
            <fieldset class="layui-elem-field">
                <legend>数据统计</legend>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-carousel x-admin-carousel x-admin-backlog" style="width: 100%">
                                <ul class="layui-row layui-col-space10 layui-this"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <table id="finance" lay-filter="finance"></table>
    </div>
    <script>
        // 表头模板 充值用1 产品来源用2
        let colsTemplate = [
            [
                { field: 'date', title: '日期', align: 'center' }
                , { field: 'total_recharge', title: '总充值', align: 'center' }
                , { field: 'wechat_recharge', title: '微信', align: 'center' }
                , { field: 'alipay_recharge', title: '支付宝', align: 'center' }
                , { field: 'recharge_user_num', title: '充值人数', align: 'center' }
                , { field: 'recharge_num', title: '充值次数', align: 'center' }
            ],
            [
                { field: 'date', title: '日期', align: 'center' }
                , { field: 'total_recharge', title: '总充值', align: 'center' }
                , { field: 'wechat_applet_recharge', title: '微信小程序', align: 'center' }
                , { field: 'fast_app_recharge', title: '快应用', align: 'center' }
                , { field: 'h5_recharge', title: 'H5', align: 'center' }
                , { field: 'tiktok_applet_recharge', title: '抖音小程序', align: 'center' }
                , { field: 'kwai_applet_recharge', title: '快手小程序', align: 'center' }
            ]
        ]
        let params = {
            elem: '#finance'
            , url: '/admin/finance/list' //数据接口
            , id: 'finance'
            , page: true
            , where: {
                type: 1,
                date_type: 1
            }
            , cols: [colsTemplate[0]]
        }
        tableList(params)

        layui.use(['table', 'laydate', 'element', 'form'], function () {
            var table = layui.table,
                laydate = layui.laydate,
                form = layui.form,
                element = layui.element;
            var type = 1;//类型 1：充值渠道日报表；2：充值渠道月报表；3：产品来源日报表；4：产品来源月报表；
            var dateParams = [
                { date: 1 },
                { date: 0 },
                { date: 7 },
                { date: 30 },
                { month: 1 },
                { month: 3 },
            ]
            // 当前的日期选项下标
            var dateIndex = 1;
            var date_type = [1, 2, 1, 2];//日期类型 1日期 2月份
            var rechargeStatistics = [1, 2, 3, 4];//统计分类；1充值渠道  2:产品来源
            addStatisticsTemplate(dateIndex);

            // 日期
            laydate.render({
                elem: '#time',
                range: ['#start_time', '#end_time'],
                format: 'yyyy-MM-dd'
            });
            laydate.render({
                elem: '#month_time',
                range: ['#start_month', '#end_month'],
                format: 'yyyy-MM',
                type: 'month'
            });
            // 切换类型
            element.on('tab(tableType)', function (data) {
                type = data.index + 1;
                console.log('切换类型type', type)
                let arr = [...$("input")]
                arr.forEach((item, index) => {
                    arr[index].value = ""
                })
                params.where = {
                    type,
                    date_type: date_type[type - 1]
                }
                // 处理表头第一行
                dateField = date_type[type - 1] == 1 ? 'date' : 'month';
                dateTitle = date_type[type - 1] == 1 ? '日期' : '月份';
                params.cols = [colsTemplate[type <= 2 ? 0 : 1]]
                params.cols[0][0].field = dateField
                params.cols[0][0].title = dateTitle
                console.log('切换类型params', params)
                tableList(params)
                // 切换搜索
                $('.layui-form').children('div').eq(date_type[data.index] - 1).show().siblings('div').hide()
                // 创建数据统计
                addStatisticsTemplate(data.index)
                // 取消日期选择样式
                $('.layui-form .layui-tab-title').children().removeClass('layui-this')
            });
            // 日期搜索切换
            element.on('tab(dateType)', function (data) {
                let timeType = $(this).data('time').split(':')[0];
                let timeValue = $(this).data('time').split(':')[1];
                let { elem, index } = data;
                dateIndex = index
                params.where = {
                    type,
                    date_type: date_type[type - 1]
                }
                params.where[timeType] = timeValue;
                tableList(params)
                addStatisticsTemplate(params.where)
                let arr = [...$("input")]
                arr.forEach((item, index) => {
                    arr[index].value = ""
                })
            });
            // 重置
            $('#resetFinanceList').on('click', function () {
                params.where = { type, date_type: date_type[type - 1] }
                tableList(params)
                addStatisticsTemplate(params.where)
                $('.layui-form .layui-tab-title').children().removeClass('layui-this')
            });
            // 搜索
            form.on('submit(searchFinanceList)', function (data) {
                console.log('搜索', type, dateIndex)
                params.where = {
                    ...data.field,
                    type,
                    date_type: date_type[type - 1]
                }
                console.log('搜索参数', params)
                tableList(params)
                addStatisticsTemplate(params.where)
                $('.layui-form .layui-tab-title').children().removeClass('layui-this')
                return false
            });

            // 创建 添加统计模板
            function addStatisticsTemplate(index) {
                console.log(index);
                if (index == 0) {
                    var paramsData = {}
                } else if (index == 2 || index == 1 || index == 3 || index == 4) {
                    var paramsData = { type: index }
                } else {
                    var paramsData = index
                }
                // let paramsData = index == 0 ? {} : index
                paramsData.type = rechargeStatistics[type - 1]
                Ajax('/admin/finance/rechargeStatistics', paramsData).then(result => {
                    let templete = '';
                    let statistics_template_keys = Object.keys(result.data)
                    let statistics_template_values = Object.values(result.data)
                    statistics_template_keys.forEach((item, index) => {
                        templete += `<li class="layui-col-xs6 layui-col-sm3 layui-col-md2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>${statistics_template_keys[index]}</h3>
                                <p><cite id="total_recharge">${statistics_template_values[index]}</cite></p>
                            </a>
                        </li>`
                    })
                    $('.layui-elem-field .layui-row').html(templete)
                });

            }
        });

    </script>
</body>

</html>